<template>
  <base-layout>
    <div class="oj-container">
      <!-- 顶部统计卡片 -->
      <a-row :gutter="16" class="stats-row">
        <a-col :span="6">
          <a-card class="stats-card">
            <statistic
              title="已解决题目"
              :value="stats.solved"
              :value-style="{ color: '#3f8600' }"
            >
              <template #suffix>
                <span class="stats-total">/ {{ stats.total }}</span>
              </template>
            </statistic>
          </a-card>
        </a-col>
        <a-col :span="6">
          <a-card class="stats-card">
            <statistic
              title="通过率"
              :value="stats.acceptRate"
              :precision="1"
              suffix="%"
              :value-style="{ color: '#cf1322' }"
            />
          </a-card>
        </a-col>
        <a-col :span="6">
          <a-card class="stats-card">
            <statistic
              title="连续打卡"
              :value="stats.streak"
              suffix="天"
              :value-style="{ color: '#1890ff' }"
            />
          </a-card>
        </a-col>
        <a-col :span="6">
          <a-card class="stats-card">
            <statistic
              title="获得积分"
              :value="stats.points"
              :value-style="{ color: '#722ed1' }"
            />
          </a-card>
        </a-col>
      </a-row>

      <!-- 题目列表卡片 -->
      <a-card class="problem-list-card">
        <!-- 搜索和筛选区域 -->
        <div class="filter-section">
          <a-input-search
            v-model:value="searchText"
            placeholder="搜索题目"
            style="width: 200px"
            @search="onSearch"
          />
          <div class="filter-right">
            <a-select
              v-model:value="difficulty"
              style="width: 100px"
              placeholder="难度"
              @change="onFilterChange"
            >
              <a-select-option value="">全部</a-select-option>
              <a-select-option value="easy">简单</a-select-option>
              <a-select-option value="medium">中等</a-select-option>
              <a-select-option value="hard">困难</a-select-option>
            </a-select>
            <a-select
              v-model:value="status"
              style="width: 100px"
              placeholder="状态"
              @change="onFilterChange"
            >
              <a-select-option value="">全部</a-select-option>
              <a-select-option value="solved">已解决</a-select-option>
              <a-select-option value="attempted">尝试过</a-select-option>
              <a-select-option value="unsolved">未开始</a-select-option>
            </a-select>
            <a-select
              v-model:value="tag"
              style="width: 120px"
              placeholder="标签"
              @change="onFilterChange"
            >
              <a-select-option value="">全部</a-select-option>
              <a-select-option value="array">数组</a-select-option>
              <a-select-option value="string">字符串</a-select-option>
              <a-select-option value="dp">动态规划</a-select-option>
              <a-select-option value="tree">树</a-select-option>
            </a-select>
          </div>
        </div>

        <!-- 题目表格 -->
        <a-table
          :columns="columns"
          :data-source="problems"
          :loading="loading"
          :pagination="pagination"
          @change="handleTableChange"
        >
          <!-- 状态列 -->
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'status'">
              <check-circle-filled v-if="record.status === 'solved'" class="status-icon solved" />
              <exclamation-circle-filled v-else-if="record.status === 'attempted'" class="status-icon attempted" />
              <minus-circle-filled v-else class="status-icon unsolved" />
            </template>

            <!-- 难度列 -->
            <template v-else-if="column.key === 'difficulty'">
              <a-tag :color="getDifficultyColor(record.difficulty)">
                {{ getDifficultyText(record.difficulty) }}
              </a-tag>
            </template>

            <!-- 通过率列 -->
            <template v-else-if="column.key === 'acceptRate'">
              <span :style="{ color: getAcceptRateColor(record.acceptRate) }">
                {{ record.acceptRate }}%
              </span>
            </template>

            <!-- 操作列 -->
            <template v-else-if="column.key === 'action'">
              <a-button type="link" @click="handleStart(record)">开始答题</a-button>
            </template>
          </template>
        </a-table>
      </a-card>
    </div>
  </base-layout>
</template>

<script>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import BaseLayout from '@/components/layout/BaseLayout.vue'
import { Statistic } from 'ant-design-vue'
import {
  CheckCircleFilled,
  ExclamationCircleFilled,
  MinusCircleFilled
} from '@ant-design/icons-vue'
import {getOJList} from "@/api/oj.js";

export default {
  name: 'OJ',
  components: {
    BaseLayout,
    Statistic,
    CheckCircleFilled,
    ExclamationCircleFilled,
    MinusCircleFilled
  },
  setup() {
    const router = useRouter()
    const searchText = ref('')
    const difficulty = ref('')
    const status = ref('')
    const tag = ref('')
    const loading = ref(false)
    const problems = ref([])
    const pagination = ref({
      current: 1,
      pageSize: 10,
      total: 0,
      showTotal: total => `共 ${total} 题`
    })

    // 统计数据
    const stats = ref({
      solved: 15,
      total: 100,
      acceptRate: 75.5,
      streak: 7,
      points: 1250
    })

    // 表格列定义
    const columns = [
      {
        title: '状态',
        dataIndex: 'status',
        key: 'status',
        width: 80,
        align: 'center'
      },
      {
        title: '题号',
        dataIndex: 'id',
        key: 'id',
        width: 80
      },
      {
        title: '标题',
        dataIndex: 'title',
        key: 'title'
      },
      {
        title: '难度',
        dataIndex: 'difficulty',
        key: 'difficulty',
        width: 100,
        align: 'center'
      },
      {
        title: '通过率',
        dataIndex: 'acceptRate',
        key: 'acceptRate',
        width: 100,
        align: 'center'
      },
      {
        title: '操作',
        key: 'action',
        width: 100,
        align: 'center'
      }
    ]

    // 模拟题目数据
    const mockProblems = [
      {
        id: 1,
        title: '两数之和',
        difficulty: 'easy',
        acceptRate: 85.5,
        status: 'solved'
      },
      {
        id: 2,
        title: '最长回文子串',
        difficulty: 'medium',
        acceptRate: 65.2,
        status: 'attempted'
      },
      {
        id: 3,
        title: '正则表达式匹配',
        difficulty: 'hard',
        acceptRate: 45.8,
        status: 'unsolved'
      }
    ]

    // 获取题目列表
    const fetchProblems = async () => {
      loading.value = true;
      try {
        const params = {
          page: pagination.value.current,
          pageSize: pagination.value.pageSize,
          keyword: searchText.value,
          difficulty: difficulty.value,
          status: status.value
        };
        const response = await getOJList(params);
        problems.value = response.data; // 假设返回的数据在response.data中
        pagination.value.total = response.total; // 假设总条目数在response.total中
      } catch (error) {
        // 处理错误情况
        console.error('Failed to fetch problems:', error);
      } finally {
        loading.value = false;
      }
    };
    onMounted(fetchProblems);
    // 搜索处理
    const onSearch = (value) => {
      searchText.value = value
      pagination.value.current = 1
      fetchProblems()
    }

    // 筛选变化处理
    const onFilterChange = () => {
      pagination.value.current = 1
      fetchProblems()
    }

    // 表格变化处理
    const handleTableChange = (pag) => {
      pagination.value.current = pag.current
      fetchProblems()
    }

    // 开始答题
    const handleStart = (record) => {
      router.push(`/oj/problem/${record.id}`)
    }

    // 获取难度对应的颜色
    const getDifficultyColor = (difficulty) => {
      const colors = {
        easy: 'success',
        medium: 'warning',
        hard: 'error'
      }
      return colors[difficulty] || 'default'
    }

    // 获取难度对应的文本
    const getDifficultyText = (difficulty) => {
      const texts = {
        easy: '简单',
        medium: '中等',
        hard: '困难'
      }
      return texts[difficulty] || difficulty
    }

    // 获取通过率对应的颜色
    const getAcceptRateColor = (rate) => {
      if (rate >= 70) return '#3f8600'
      if (rate >= 40) return '#d4b106'
      return '#cf1322'
    }

    onMounted(() => {
      fetchProblems()
    })

    return {
      searchText,
      difficulty,
      status,
      tag,
      loading,
      problems,
      columns,
      pagination,
      stats,
      onSearch,
      onFilterChange,
      handleTableChange,
      handleStart,
      getDifficultyColor,
      getDifficultyText,
      getAcceptRateColor
    }
  }
}
</script>

<style scoped>
.oj-container {
  padding: 24px;
  background: #f0f2f5;
  min-height: calc(100vh - 64px);
}

.stats-row {
  margin-bottom: 24px;
}

.stats-card {
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.stats-total {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.45);
  margin-left: 4px;
}

.problem-list-card {
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.filter-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.filter-right {
  display: flex;
  gap: 8px;
}

.status-icon {
  font-size: 18px;
}

.status-icon.solved {
  color: #52c41a;
}

.status-icon.attempted {
  color: #faad14;
}

.status-icon.unsolved {
  color: #d9d9d9;
}

@media screen and (max-width: 768px) {
  .oj-container {
    padding: 12px;
  }

  .stats-row {
    margin-bottom: 12px;
  }

  .filter-section {
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
  }

  .filter-right {
    flex-wrap: wrap;
  }
}
</style>
